<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			.body {
				width: 1000px;
				margin: 0 auto;
			}
			
			.div1 ul {
				width: 142px;
			}
			
			.div1 li {
				padding-bottom: 20px;
				width: 140px;
				text-align: right;
			}
			
			.div1 {
				display: inline-block;
				width: 127px;
			}
			
			.div2 {
				display: inline-block;
			}
			
			.div2 li {
				padding-bottom: 20px;
			}
			
			.div3 li {
				height: 40px;
				text-align: left;
				display: none;
			}
			
			.div3 {
				width: 418px;
				color: red;
				font-family: "微软雅黑";
				position: relative;
				top: -242px;
				left: 310px;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="div1">
				<ul>
					<li>用户名：</li>
					<li>密码：</li>
					<li>确认密码：</li>
					<li>电子邮箱：</li>
					<li>手机号码：</li>
					<li>生日：</li>
				</ul>
			</div>
			<div class="div2">
				<ul>
					<li><input type="text" id="name" value="" /></li>
					<li><input type="password" id="mm" value="" /></li>
					<li><input type="password" id="remm" value="" /></li>
					<li><input type="text" id="email" value="" /></li>
					<li><input type="text" id="iphone" value="" /></li>
					<li><input type="text" id="birth" value="" /></li>
				</ul>
			</div>
			<div class="div3">
				<ul>
					<li>用户名由英文字母和数字组成的4-16位字符，以字母开头</li>
					<li>密码由英文字母和数字组成的4-10位字符</li>
					<li>密码与上次不一致！</li>
					<li>邮箱格式错误！</li>
					<li>手机号码格式错误！</li>
					<li>生日格式错误！</li>
				</ul>
			</div>
			<div><input type="submit" id="submit" name="" onclick="check()" /></div>
		</div>
		<script type="text/javascript">
			var name1 = /^[A-z][0-9]{3,15}$/;
			var word1 = /[[A-z]{1,15}\d{1,15}]{4,16}/;
			var email1 = /^\w+([-+.])*\w+@\w+\.\w+([-.\w+])*$/;
			var phone1 = /^1[345789]\d{9}$/;
			var birth1 = /^(19|20)[0-9]{2}-(0?[1-9]|1[0-2])-(0?[1-9]|2[0-9]|3[0-1])$/;
			var name0 = document.getElementById("name");
			var word = document.getElementById("mm");
			var remm = document.getElementById("remm");
			var email = document.getElementById("email");
			var iphone = document.getElementById("iphone");
			var birth = document.getElementById("birth");
			var no = true;
			var no1=true;
			var no2=true;
			var no3=true;
			var no4=true;
			var no5=true;
			var lis = document.querySelectorAll(".div2 li");
			for(var i = 0; i < lis.length; i++) {
				lis[0].children[0].onblur = function() {
					if(!(name1.test(name0.value))) {
						no = false;
						console.log(name0.parentNode.parentNode.parentNode.parentNode);
						name0.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[0].style.display = "inline-block";
					} else {
						name0.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[0].style.display = "none";
					}
				}
				lis[1].children[0].onblur = function() {
					if(!(word1.test(word.value))) {
						no1 = false;
						var str = word.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[1];
						str.style.display = "inline-block";
					} else {
						var str = word.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[1];
						str.style.display = "none";
					}
				}
				lis[2].children[0].onblur = function() {
					if(!(remm.value==word.value&&remm!="")) {
						no2 = false;
						var str = remm.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[2];
						str.style.display = "inline-block";
					} else {
						var str = remm.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[2];
						str.style.display = "none";
					}
				}
				lis[3].children[0].onblur = function() {
					if(!(email1.test(email.value))) {
						no3 = false;
						var str = email.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[3];
						str.style.display = "block";
					} else {
						var str = email.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[3];
						str.style.display = "none";
					}
				}
				lis[4].children[0].onblur = function() {
					if(!(phone1.test(iphone.value))) {
						no4 = false;
						var str = iphone.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[4];
						str.style.display = "block";
					} else {
						var str = iphone.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[4];
						str.style.display = "none";
					}
				}
				lis[5].children[0].onblur = function() {
					if(!(birth1.test(birth.value))) {
						no5 = false;
						var str = birth.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[5];
						str.style.display = "inline-block";
					} else {
						var str = iphone.parentNode.parentNode.parentNode.parentNode.children[3].children[0].children[5];
						str.style.display = "none";
					}
					return no;
				}
			}
		
		</script>
	</body>

</html>